import React, {Component} from 'react'
import {Image, StyleSheet} from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import TabNavigatorItem from "react-native-tab-navigator/TabNavigatorItem";
import Home from '../home/home'
import Shop from '../shop/shop'
import Mine from '../mine/mine'
import More from '../more/more'

export default class Main extends Component {

    state = {
        selectedTab: 'home',
    }

    render() {
        return (
            <TabNavigator style={{flex: 1}}>
                {/* 首页 */}
                {this.renderTabView('首页', 'home',
                    require('../../../imgs/icon_tabbar_homepage.png'),
                    require('../../../imgs/icon_tabbar_homepage_selected.png'),
                    Home
                )}

                {/* 商家 */}
                {this.renderTabView('商家', 'shop',
                    require('../../../imgs/icon_tabbar_merchant_normal.png'),
                    require('../../../imgs/icon_tabbar_merchant_selected.png'),
                    Shop
                )}

                {/* 我的 */}
                {this.renderTabView('我的', 'mine',
                    require('../../../imgs/icon_tabbar_mine.png'),
                    require('../../../imgs/icon_tabbar_mine_selected.png'),
                    Mine)}

                {/* 更多 */}
                {this.renderTabView('更多', 'more',
                    require('../../../imgs/icon_tabbar_misc.png'),
                    require('../../../imgs/icon_tabbar_misc_selected.png'),
                    More
                )}
            </TabNavigator>
        )
    }

    renderTabView(title, tabState, imgSource, selectedImgSource, Component) {
        return (
            <TabNavigatorItem
                selected={this.state.selectedTab === tabState}
                renderIcon={() => <Image
                    style={styles.tabImageStyle}
                    source={imgSource}/>}
                renderSelectedIcon={() => <Image
                    style={styles.tabImageStyle}
                    source={selectedImgSource}/>}
                title={title}
                titleStyle={styles.tabTitleStyle}
                selectedTitleStyle={styles.tabTitleSelectedStyle}
                onPress={() => this.setState({selectedTab: tabState})}
            >
                <Component {...this.props}/>
            </TabNavigatorItem>
        )
    }
}

const styles = StyleSheet.create(
    {
        tabImageStyle: {
            height: 26,
            width: 26
        },

        tabTitleStyle: {},
        tabTitleSelectedStyle: {
            color:'#f09738'
        }
    }
)